<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@ page import="com.google.appengine.api.users.User" %>
<%
	User user = (User) request.getAttribute("user");
    String data = (String) request.getAttribute("data");
    Boolean loggedIn = (Boolean) request.getAttribute("loggedIn");
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta http-equiv="Pragma" content="no-cache" >
<meta http-equiv="Cache-Control" content="no-cache" >
<meta http-equiv="Expires" content="-1" >

<link rel="shortcut icon" href="/content/info.niwota.webime/assets/icon/webime.png" >
<title>Web Input</title>

<link rel="stylesheet" href="http://hotwebproxy.appspot.com/assets/style/common.css" type="text/css" >
<link rel="stylesheet" href="/content/info.niwota.webime/assets/opt/style/jquery.autocomplete.css" type="text/css" >

<style type="text/css">

ul {
	list-style: disc inside;
	margin-left: 1em;
}

#content {
	padding: 10px;
}

label {
	float: left;
	width: 12em;
}

input[type=text] { width: 15em; }

</style>

<script type="text/javascript" src="https://www.google.com/jsapi?key=ABQIAAAAk4kw-fYBzjizex9DHmmuXBSSoBz1sb4nFR_F9xgzOIXLsu5DxhRLXs9wmoRrDDngUCMjbQ7tSNBeBg"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://talkgadget.google.com/talkgadget/channel.js"></script>

<script type="text/javascript" src="http://hotwebproxy.appspot.com/assets/opt/ui/tooltip/qtip/jquery.qtip-1.0.0-rc3.js"></script>
<script type="text/javascript" src="http://hotwebproxy.appspot.com/assets/script/common.js"></script>

<script type='text/javascript' src="/content/info.niwota.webime/assets/opt/script/jquery.ajaxQueue.js"></script>
<script type='text/javascript' src="/content/info.niwota.webime/assets/opt/script/jquery.autocomplete.js"></script>
<script type="text/javascript" src="/content/info.niwota.webime/assets/script/custom.js"></script>

<script type="text/javascript">
var spinner = '<img src="/assets/image/spin.gif" alt="Please wait..." ><span style="color: white; font-size: xx-large;">...<blink>.....</blink></span>';
var jsonp = 'http://hotwebproxy.appspot.com/content/info.niwota.webime/jsonp/webime/updateInput?type=json&callback=?';
var googlesuggest = 'http://google.com/complete/search';

$.ajaxSetup ({  
	cache: false  
}); 

var data = <%= data %>;
var cdata = {};

$(document).ready(function(){
	$.initOptionMenu();
	//
	initForm();
	initSuggest();
	
	initChannel();
});

function showError(msg) {
	$('#status').html(msg);
}

function showBusy(timeout, msg) {
	var tag = $('#status');
	
	var t = timeout || 3000;
	var m = msg || '';
	tag.html(spinner);
	var timer = setTimeout(function(){ tag.html(m).css({ "color": "#ff0000" }); }, t);
	
	this.cancel = function() {
		clearTimeout(timer);
		tag.empty();
	}
	
	return this;
}

function initForm() {
	$("#submit1").click(function(e) {
		var act = $(this).val();
		doSubmit(act) 
     	return false;
	});
	$("#submit2").click(function(e) {
		var act = $(this).val();
		doSubmit(act) 
     	return false;
	});
	$("#submit3").click(function(e) {
		var act = $(this).val();
		doSubmit(act) 
     	return false;
	});

	$('#input').focus(function() {
		$('#status').text('');
	});
}

var busy = null;

function doSubmit(act) {
	var err = $('#status');
	var v = $('#input').val();
	if (v) {
		err.text(''); 
						
		var url = jsonp + '&action='+ act + '&input=' + v + '&tag=ime&peer='+ data.peer + '&cid=' + cdata.cid;
		busy = showBusy(5000, 'Timeout, please try again.');
	
		$.getJSON(url, function(d) { 
			if (d && d.error) {
				showError(d.error);
			}
		});
	} else {
		err.text('No input text');
	}

	return false;
}

function callback(d) {
	if (busy) {
		busy.cancel();
	}
	var tag = $('#status');
	if (d && d.rc == false) {
		tag.html(d.error).css({ "color": "#ff0000" });
	} else {
		var fin = $('#input');
		fin.val('');
		tag.empty();
	}
}

function initSuggest() {

	$('#gsuggest').change(
		function() {
			var chk = $('#gsuggest').is(':checked');
			if (chk) {
				initAutoComplete();
			} else {
				$('#input').unautocomplete();
			}
		}
	);
	
	initAutoComplete();
}

function initAutoComplete() {
	$('#input').autocomplete(googlesuggest, {
		width: 512,
		multiple: true,
		multipleSeparator: ' ',
		matchContains: true,
		parse: parseData,
		dataType: 'jsonp'
	});
}

function parseData(d) {
	var parsed = [];
	if (d && d.length > 1) {
		var sa = d[1];
		for (var i = 0; i < sa.length; i++) {
			var w = $.trim(sa[i][0]);
			if (w) {
				w = w.split("|");
				parsed[parsed.length] = {
					data: w,
					value: w[0],
					result: w[0]
				};
			}
		}
	}
	return parsed;
}
</script>

<script type="text/javascript">

function initChannel() {
	var busy = showBusy(5000, 'Timeout, please try again.');
	
	//init channel
	$.getJSON('http://hotwebproxy.appspot.com/channel?type=json&callback=?', function(d) {
		busy.cancel();
		
		if (d.token) {
			openChannel(d);
		} else if (d.error) {
			showError(d.error);
		}
	});
}

function openChannel(d) {
	cdata = d;

	var ch = new goog.appengine.Channel(d.token);
	var handler = {
		'onopen':  function() {},
		'onmessage': function(m) {
			var rd = JSON.parse(m.data);
			if (rd) {
				handleMessage(rd);
			}
		},
		'onerror': function() {
			showError('Failed');
		},
		'onclose': function() {}
	};
	
	ch.open(handler);
}

function handleMessage(rd) {
	var tag = rd.tag || '';
	var sa = tag.split('_', 2);
	var action = sa[0];
	switch(action) {
	case 'ime':
		callback(rd);
		break;
	default:
	}
}

</script>
</head>
<body>

<div id="topnav">
	<a class="logo" href="/webime" title="Enter from the web">
	<img class="icon32" src="/content/info.niwota.webime/res/drawable/icon.png"  alt="" >
	<span>Web Input</span>
	</a>

	<span class="top-center"></span>
	
	<span class="top-right" style="margin-right: 64px;">

	<span class="action"><a class="" target="help" href="/content/info.niwota.webime/assets/help.htm" >Help</a></span>&nbsp;|&nbsp;
	<span class="action"><a href="#" onclick="self.close();">Quit</a></span>
	
	</span>
</div>

<!--page content-->
<div id="page-content">

<div style="clear: both;"></div>

<div id="content" style="z-index: 1000; ">

<form name="inputform" id="inputform" autocomplete="off" method="post"
	action="/content/info.niwota.webime/"  
	enctype="application/x-www-form-urlencoded" onsubmit="return false;">
	<p><input type="checkbox" id="gsuggest" name="gsuggest" value="gsuggest" checked="checked" />
	<span style="color: #0ff;">Google suggest</span></p>
	<p>
	<label></label>
	<textarea name="input" id="input" style="width:512px; height: 96px;"></textarea><br />
	
	<input type="submit" value="ENTER" name="submit1" id="submit1" />
	<input type="submit" value="NEXT" name="submit2" id="submit2" />
	<input type="submit" value="DONE" name="submit3" id="submit3" />

	</p>
	<p><span id="status" style="color: #f00;"></span></p>
</form> 

</div>

</div>
<!--//page content-->

<div id="optionmenu">
<a class="" target="help" href="/content/info.niwota.webime/assets/help.htm" title="Help" ><img src="http://hotwebproxy.appspot.com/res/drawable/ic_menu_help.png" /></a>
<a href="#" title="Quit" onclick="self.close();"><img src="http://hotwebproxy.appspot.com/res/drawable/ic_menu_done.png" /></a>
</div>

<div id="footer">

<span style="color: #fff;">Web Input 1.0.0 &copy; 2010 All rights reserved</span> 

</div>

<div id="wallpaper" style="display: block;"><img src="http://hotwebproxy.appspot.com/assets/image/bg_blue_sky.jpg" width="100%" height="100%" /></div>

</body>
</html>